<template>
  <div class="newindex-mian">
    <div class="kys-madestyle-body">
      <div class="kys-madestyle-swiper common-clearboth">
        <div class="kys-madestyle-swiper-left">
          <main class="banner">
            <el-carousel :interval="5000" arrow="always">
              <el-carousel-item
                v-for="item in pageData.bannerList"
                :key="item.advertImgID"
              >
                <nuxt-link to="/">
                  <img alt="" :src="item.imgAddr | imgCache(1000, 0)" />
                </nuxt-link>
              </el-carousel-item>
            </el-carousel>
          </main>
        </div>
        <div class="kys-madestyle-swiper-right kys-madestyle-hover"
             style="border: 1px solid #e7e7e7;background: hsla(0, 0%, 0%, 0);">
          <div class="kys-madestyle-userinfo">

            <img src="http://baota.111zh.cn/Public/Front/xinmeng1/images/mrtx.png" alt="头像">
            <p class="overwords">用户编号：<nuxt-link to="/">{{ user.userName }}({{ user.localUserID }})</nuxt-link></p>
            <p class="overwords">用户余额：<nuxt-link to="/charge4">{{ (user.userMoney ? user.userMoney.money : 0) | n2 }}元</nuxt-link></p>
            <p class="overwords">用户等级：<nuxt-link to="">{{ user.userLevel ? user.userLevel.levelName : '' }}</nuxt-link></p>
            <div class="kys-loginbtns">
              <nuxt-link to="/account4" class="layui-btn">会员中心</nuxt-link>

              <a  class="layui-btn layui-btn-primary" @click="doLogout">退出登录</a>
            </div>
          </div>

        </div>
        <div class="kys-madestyle-news common-clearboth">
          <div class="kys-madestyle-news-left kys-madestyle-hover">
            <div class="kys-madestyle-news-left-header"> 系统公告
              <nuxt-link to="/notice4/-1">MORE &gt;</nuxt-link>
            </div>
            <div class="kys-madestyle-news-left-body">
              <ul>
                <li
                  v-for="item in pageData.noticeList"
                  :key="item.systemNoticeID"
                >
                  <nuxt-link
                    :style="`color: ${item.color}`"
                    :to="`/notice4/${item.systemNoticeID}`"
                  >
              {{ item.systemNoticeTitle }}
                    <i>{{ timeFormat(item.createTime) }}</i>
                  </nuxt-link>
                </li>

              </ul>
            </div>
          </div>
  <!--        <div class="kys-madestyle-news-right kys-madestyle-hover">-->
  <!--          <div class="kys-madestyle-news-right-header">-->
  <!--            <h2>联系客服</h2>-->
  <!--          </div>-->
  <!--          <div class="kys-madestyle-news-right-body">-->
  <!--            <div class="kys-contact-item">-->
  <!--              <p>客服 电话 ：{{ pageData.contact.frontServicePhone }}-->
  <!--              </p>-->
  <!--            </div>-->
  <!--            <div class="kys-contact-item">-->
  <!--              <p>业务 电话：{{ pageData.contact.frontWorkPhone }}-->
  <!--              </p>-->
  <!--            </div>-->
  <!--            <div class="kys-contact-item">-->
  <!--              <p>加款 电话：{{ pageData.contact.frontMoneyPhone }}-->
  <!--              </p>-->
  <!--            </div>-->

  <!--          </div>-->
  <!--        </div>-->
          <div class="kys-madestyle-news-right kys-madestyle-hover">
            <div class="kys-madestyle-news-right-header"><h2>联系客服</h2></div>
            <div class="kys-madestyle-news-right-body">
              <div class="kys-contact-item">
                <p>客服 咨询 QQ：
                  <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontServicePhone}&site=qq&menu=yes`"></a>
                </p>
              </div>
              <div class="kys-contact-item">
                <p>售前 业务 QQ：
                  <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontWorkPhone}&site=qq&menu=yes`"></a>
                </p>
              </div>
              <div class="kys-contact-item">
                <p>财务 加款 QQ：
                  <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontMoneyPhone}&site=qq&menu=yes`"></a>
                </p>
              </div>
              <div class="kys-contact-item">
                <p>Q Q 群 号 码&nbsp;&nbsp;：
                  <a :href="`http://wpa.qq.com/msgrd?v=3&uin=${pageData.contact.frontMoneyPhone}&site=qq&menu=yes`"></a>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="key-madestyle-links">
          <div class="kys-madestyle-news-left-header">友情链接</div>
          <div class="new1-madestyle-links-body common-clearboth">
            <a
              style="border:none"
              v-for="item in pageData.friends"
              :key="item.friendLinkID"
              :href="item.friendLinkAddr"
              rel="nofollow">
            <img src="http://img.sukatong.com/Uploads/Attachment/2021-01-30/6015187c3d072.png" alt="速卡通">
              <span>{{ item.friendLinkName }}</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import fixupMixin from '@/mixins/fixup'
import qqservice from './themes/qqservice'
import user from '@/common/user'
import log from "~/pages/wap/log";

export default {

  mixins: [fixupMixin],
  props: {
    pageData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      dataDay: 1,
      recommendsCategory: [],
      recommends: [],
      supply: {}, // 统计信息，是个对象
      noticeList: [],
      isSupplyNow: false,//数据总计是否显示
    }
  },
  computed: {
    ...mapState({
      user: (state) => state.user,
      updateEnable: (state) => state.updateEnable
    })
  },
  mounted() {
    // this.getLoginUser()
    this.getRecommends()
    this.getRecommendsGoods()
    this.getNotice()
    // this.getLoginTip()
    this.getSupplyTotal()
    this.getUserExtend()
  },
  methods: {
    timeFormat(time) {
      return /(?<=-)\d{1,2}-\d{1,2}/g.exec(time)[0]
    },
    // async getLoginUser() {
    //   const res = await this.$axios.get('/user/user/getLoginUser')
    //   if (res.code === 1001 && res.body) {
    //     this.user = res.body
    //   }
    // },
    async getRecommends() {
      const res = await this.$axios.get('/goods/catalog/getCRList')
      if (res.code === 1001 && res.body) {
        this.recommendsCategory = res.body
      }
    },
    getSupplyTotal() {
      // 查询统计
      this.$axios.get('/platform/site/getSupplyTotal').then(res => {
        this.supply = res.body
      })
    },
    async getRecommendsGoods() {
      const res = await this.$axios.post(
        '/goods/goods/catalogGoodsRecommendPage'
      )
      if (res.code === 1001 && res.body) {
        this.recommends = res.body.records
      }
    },
    async getNotice() {
      const res = await this.$axios.post('/site/systemNotice/pageFK', null, {
        params: {
          pageNum: 1,
          pageSize: 5
        }
      })
      if (res.code === 1001 && res.body) {
        this.noticeList = res.body.records
      }
    },
    async getLoginTip() {
      if (this.$route.query.pay) return
      const res = await this.$axios.get('/site/loginTips/get')
      if (res.code === 1001 && res.body && res.body.content) {
        this.$alert(res.body.content, res.body.title)
      }
    },
    async getUserExtend() {
      const res = await this.$axios.get('/user/userExtend/get')
      if (res.code === 1001 && res.body) {
        const data = res.body;
        this.isSupplyNow = data.isSupply === 1
      } else {
        this.isSupplyNow = false
      }
    },
    doLogout() {
      user.removeToken(this.$cookies)
      this.$router.replace('/')
    },

    async doLogin() {
      const res = await this.$axios.post('/login/login/login', null, {
        params: {
          login: this.login,
          password: this.password
        },
        tokenUpdate: true
      })
      if (res.code === 1001) {
        await this.$store.dispatch('getUserExtend')
       console.log(this.systemStyle.goPage);
         if(this.systemStyle.goPage == null || this.systemStyle.goPage == 0){
           await this.$router.push('/category-list4');
           this.$router.go(0);
        }else{
           await this.$router.push('/category-list4');
           this.$router.go(0);
        }
      }
    },
  },
  components: {
    qqservice
  }
}
</script>
<style scoped>
/*madestyle3*/
.kys-madestyle-headerbox{position:relative;width:100%;height:90px;background:white;  border-bottom: 2px solid #2495e3;}
.kys-madestyle-header{position:relative;width:1160px;height:100%;background:white;margin:0 auto;}
.kys-madestyle-body{position:relative;width:1200px;margin:0 auto;}
.kys-madestyle-logo{position:relative;width:180px;height:60px;margin-left:0;margin-top:15px;float:left;}
.kys-madestyle-header ul{width:500px;display:flex;flex-direction: row;justify-content: center;align-items: center;height:90px;}
.kys-madestyle-header ul li{position:relative;line-height:60px;margin:0 20px; letter-spacing: 2px;}
.kys-madestyle-header ul li a{color:#7f7f7f;}
.kys-madestyle-header ul li a.kys-madestyle-header-active{color:#2495e3;}
.kys-madestyle-header ul li a.kys-madestyle-header-active::after{position:absolute;content:'';bottom:10px; width:50px;left:50%;margin-left:-27px; height:2px;background: #2495e3;}
.kys-madestyle-search{position:absolute;right:0;top:25px;}
.kys-madestyle-search .layui-input-inline{float:left;}
.kys-madestyle-search .layui-select-title input{border-radius:2px 0 0 2px;border-right:none;}
.kys-madestyle-body{position:relative;width:1160px;padding:20px 0;margin:0 auto;}
.kys-madestyle-swiper{width:100%;position:relative;}
/*轮播图宽度*/
.kys-madestyle-swiper-left{position:relative;width:850px;height:315px;float:left;}
.kys-madestyle-swiper-left a,.kys-madestyle-swiper-left img{display:block;width:100%;height:100%;}
.kys-madestyle-swiper-right{position:relative;width:300px;height:315px;float:right;right:0;top:0;background:#f9f9f9;transition:0.5s;padding:20px;box-sizing:border-box;}
.kys-madestyle-swiper-right:hover{background:#f1f1f1;}
.kys-madestyle-swiper-right input{height:40px;line-height:40px;margin-bottom:15px;padding-left:44px;box-sizing:border-box;}
.kys-loginname{background: #fff0 url(~assets/images/icon_user01.png) no-repeat 10px center;}
.kys-loginpwd{background: #fff0 url(~assets/images/icon_user02.png) no-repeat 10px center;}
.kys-loginbtns .layui-btn{width:45%;height:35px;line-height:35px;}
.kys-loginbtns .layui-btn+.layui-btn{margin-left:8%;}
.kys-loginbtns .layui-btn:nth-last-child(1):hover{border-color:#0099ff;}
.kys-loginbtns-forget{margin-top:15px;}
.kys-loginbtns-forget a{display:inline-block;line-height:25px;color:#aaa;font-size:12px;}
.kys-loginbtns-logins{border-top:1px solid #e7e7e7;padding-top:20px;margin-top:20px;}
.kys-loginbtns-logins a{display:inline-block;width:37px;height:36px;transition: all .8s linear;}
.kys-loginbtns-logins a.qqlogin{background: url(~assets/images/lg_onekey.png) left center no-repeat;}
.kys-loginbtns-logins a.wxlogin{background: url(~assets/images/lg_onekey.png) left center no-repeat;margin-left:15px;background-position: -54px center;}
.kys-loginbtns-logins a:hover{transform:rotate(360deg);}
.kys-madestyle-news{margin-top:20px;}
.kys-madestyle-news-left{width:825px;height:380px;border:1px solid #e7e7e7;box-sizing:border-box;padding:0 20px;float:left;}
.kys-madestyle-hover{transition:0.5s;}
.kys-madestyle-hover:hover{background:#f7f7f7;}
.kys-madestyle-news-left-header{margin-bottom: 0px;position:relative;line-height:80px;font-size:18px;color:#2495e3;font-weight:bold;padding-left:20px;border-bottom:1px solid #e7e7e7;}
.kys-madestyle-news-left-header::before{position:absolute;content:'';left:0;top:30px;width:3px;height:20px;background:#2495e3;}
.kys-madestyle-news-left-header a {color:#a2a2a2;font-size:14px;float:right;font-weight:normal;}
.kys-madestyle-news-left-body{padding-top:15px;}
.kys-madestyle-news-left-body ul li{position:relative;width:100%;padding-right:120px;box-sizing:border-box;margin-bottom:12px;transition:0.5s;}
.kys-madestyle-news-left-body ul li:hover{padding-left:15px;}
.kys-madestyle-news-left-body ul li:nth-last-child(1){margin-bottom:0;}
.kys-madestyle-news-left-body ul li a{padding-left: 24px;display: inline-block;background: url(~assets/images/right_arrow.png) no-repeat left center;transition: all .3s linear;font-size:14px;line-height:20px;width:100%;white-space: nowrap;overflow:hidden;    text-overflow: ellipsis;box-sizing:border-box;}
.kys-madestyle-news-left-body ul li i{position:absolute;right:0;font-style:normal;color:#979797;font-size:12px;line-height:20px;top:0;}
.kys-madestyle-news-right{position:relative;float:right;right:0;top:0;width:300px;height:380px;border:1px solid #e7e7e7;box-sizing:border-box;}
.kys-madestyle-news-right-header{position:relative;padding:0 20px;box-sizing:border-box;}
.kys-madestyle-news-right-header h2{line-height:80px;font-size:18px;text-align:center;color:#fff;font-weight:bold;border-bottom:1px solid #e7e7e7;}
.kys-madestyle-news-right-body{position:relative;padding:20px 20px 0;box-sizing:border-box;border-bottom:1px solid #e7e7e7;}
.kys-contact-item{margin-bottom:15px;}
.kys-contact-item p{font-size:12px;color:#838383;position:relative;line-height:25px;}
.kys-contact-item p a{position:absolute;right:0;top:0;width:77px;height:22px; background:url(~assets/images/qq.png) no-repeat;}
.key-madestyle-links{position:relative;border:1px solid #e7e7e7;margin-top:20px;padding:0 20px;}
.kys-madestyle-links-body{margin-top: -20px;position:relative;width:100%;padding:5px 0;box-sizing:border-box;}
.kys-madestyle-links-body a{display:inline-block;float:left;border:1px solid #e7e7e7;margin-right:15px;}
.kys-madestyle-links-body img{width:85px;height:40px;transition:0.3s;}
.kys-madestyle-links-body a:hover img{transform:scale(1.05);}
.kys-madestyle-footer{position:relative;width:100%;padding:35px 0;background:#373d44;}
.kys-madestyle-footer p{text-align:center;color:#fff;font-size:12px;}
.kyx-jubao img{display:block;margin:20px auto;}
.kys-madestyle-footer p a{color:#fff;margin:0 2px;}
.kys-madestyle-searchbtn{position:relative;height:31px;line-height:31px;margin-left:-1px;}
.kys-madestyle-userinfo img{position:relative;width:80px;height:80px;border-radius:50%;display:block;margin:0 auto;margin-bottom:20px;}
	.kys-madestyle-userinfo p{line-height:30px;text-align:center;}
	.kys-madestyle-userinfo .kys-loginbtns{margin:25px 0 0;}
</style>
<style lang="scss" scoped>
// @import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style1/common.css';
// @import 'assets/style/style1/openlogin.css';
// @import 'assets/style/style1/style.css';
// @import 'assets/style/style1/font_1451715_0505c2bxv7b7.css';

.newindex-mian {
  // width: 1200px !important;
  margin: 0 auto;
  background-color: #fff;
}
.kys-madestyle-body {
  max-width: 1172px;
  width: 100%;
  padding-top: 0 !important;
  background-color: #fff;
}
.newindex-mian .kys-madestyle-swiper-left {
  margin-bottom: 20px;
}
.kys-madestyle-news-left {
  width: 850px;

}
.kys-madestyle-news-right-header h2 {
  background: unset;
  color: #2495e3;
}
.kys-contact-item {
  position: relative;
  a {
    position: absolute;
    right: 0;
    top: 0;
    width: 77px;
    height: 22px;
    background: url('http://baota.66skt.cn/Public/Front/xinmeng/images/qq.png') no-repeat !important;
  }
}
.kys-madestyle-links-body {
  margin-top: 0;
  padding: 30px 0;
}
.new1-madestyle-links-body {
  flex-wrap: wrap;
  display: flex;
  padding: 30px 0;
  a {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-right: 15px;
    font-size: 12px;
    margin-bottom: 10px;
    img {
      border: 1px solid #e7e7e7;
      width: 85px;
      height: 40px;
      transition: 0.3s;
      margin-bottom: 5px;
    }
  }
}
</style>
<style lang="scss">
.newindex-mian .el-carousel__container {
  height:315px;
}
</style>
